<template>
    <h1>vue3一个人的信息</h1>
    <h1>姓名：{{user.name}}</h1>
    <h1>年龄：{{user.age}}</h1>
    <h1>brand：{{brand}}</h1>
    <button @click="sayWelcome">说话Vue2</button>
</template>
<script>
import {ref,reactive,watch,toRefs ,watchEffect} from 'vue'
import _ from 'lodash';
export default {
  /**
   * watch
   * vue3和vue2混用
   * vue3能访问vue2的属性和方法
   * vue2不能访问vue3的属性和方法
   * 如果属性冲突以vue3为主
   */
name: 'demo',
  // // 测试 ，暂时不考虑响应式
  setup(){
  //定义个变量
  let objReactive = reactive({user: {name: '小松A', age: '20'}, brand: 'Channel'})
    /**
     *   基础深拷贝
     * */
  // watch(() => objReactive,(newValue,oldValue) =>{
  //   console.log(`objReactiveWatch`)
  //   console.log('new',JSON.stringify(newValue))
  //   console.log('old',JSON.stringify(oldValue))
  // },{deep: true})

  //
    /**
     *   使用 lodash工具 对象深度监听的最佳实践- reactive且源采用函数式返回，返回深拷贝后的数据
     * */
  // watch(() => _.cloneDeep(objReactive), (newValue, oldValue) => {
  //   console.log('objReactiveCloneDeepWatch')
  //   console.log('new:',JSON.stringify(newValue))
  //   console.log('old:',JSON.stringify(oldValue))
  // })
    const callMe =(v)=>{
      console.log('callMe~~~~~~',v)
    }
    /**
     * 和watch 区别
     * 1 watch 监听需要被监听对象
     * 2 watch 只有值发生变化了才会触发， watchEffect无论如何都会执行一次
     */
    watchEffect(()=>{
      console.log('objReactive',objReactive.user.age)
      callMe(1)
    })
  const sayWelcome =()=>{
    objReactive.user.age ++
  }
  setTimeout(()=>{
    objReactive.user.age ++
    objReactive.user.name = '小松B'
  },3000)


  return{
    ...toRefs(objReactive),sayWelcome
  }
},
}
</script>
<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
